<template>
	<view class="main">
		<u-navbar
		title=" "
		:is-back="false"
		:border-bottom="false"
		:background="background">
		<view class="header-nav">
			<view class="left">
				<u-icon name="arrow-left" color="#ffffff" size="34" @tap="black"></u-icon>
				<view class="title">
					刷题app优化项目
				</view>
			</view>
			<image src="../../static/image/ico/kefu.png" mode="aspectFill"></image>
		</view>
		</u-navbar>
		<view class="header">
			<view class="left">
				<view class="title">
					<text class="u-line-1">预算 ¥1710.00 (税前)</text>
					<text></text>
				</view>
				<view class="des">
					<text class="u-line-1">类型: Aandroid</text>
					<text class="u-line-1">技能: VUE</text>
					<text class="u-line-1">交付: 2021-06-06</text>
				</view>
			</view>
			<view class="right">
				<view class="title">项目经理</view>
				<image src="../../static/image/xmjl.png" mode="aspectFill"></image>
				<view class="status">待确认</view>
			</view>
		</view>
		<view class="content">
			<view class="tab-nav">
				<u-tabs-swiper 
				ref="uTabs" 
				:list="list" 
				bg-color="#F9F9F9"
				:current="current" 
				@change="tabsChange" 
				:is-scroll="false"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @change="changeSwiper">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll">
						<view class="introduction">
							功能描述:
							
							1/ 腾讯云直播开发,接入腾讯云直播;2/4个表单页面的制作
							1/ 腾讯云直播开发,接入腾讯云直播;
							
							2/4个表单页面的制作1/ 腾讯云直播开发,接入腾讯云直播;
							2/4个表单页面的制作
						</view>
						<view class="introduction-imgs">
							<image src="" mode=""></image>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll">
						<block v-for="(item,index) in 5" :key="index">
							<WorksItem bgColor="#F9F9F9"></WorksItem>
						</block>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="scroll">
						<block v-for="(item,index) in 5" :key="index">
							<view class="schedule">
								<view class="date">06-18</view>
								<view class="cont">
									<text>灵活用工平台: </text>
									<text> 项目审核不通过,请尽快进行修改</text>
								</view>
							</view>
							<view class="schedule">
								<view class="date">06-18</view>
								<view class="cont">
									<text>灵活用工平台: </text>
									<text>项目审核通过,平台将尽快安排项目经理为您服务</text>
								</view>
							</view>
						</block>
					</scroll-view> 
				</swiper-item>
				
			</swiper>
		</view>
		<view class="tabar">
			<view v-if="true" class="status">工作结束</view>
			<view v-if="false" class="add" @tap="toPage('/pages/Job/landmark')">
				<u-icon name="plus-circle-fill" color="#2979ff" size="34"></u-icon>
				<text>添加里程</text>
			</view>
			<view class="right">
				<text v-if="false" class="reason" @tap="reason_show=!reason_show">查看原因</text>
				<button v-if="true" type="default" class="modify" @tap="toPage('/pages/Job/comment')">发布评价</button>
				<button v-if="false" type="default" class="modify">联系对方</button>
				<button v-if="false" type="default" class="modify">面试评价</button>
				<button v-if="false" type="default" class="modify">同意</button>
				<button v-if="false" type="default" class="modify">拒绝</button>
				<button v-if="false" type="default" class="modify" @tap="toPage('/pages/Job/updateProgress')">提交进度</button>
				<button v-if="true" type="default" class="modify" @tap="show=!show">托管费用</button>
				<button v-if="false" type="default" class="modify">修改</button>
			</view>
		</view>
		<u-popup v-model="reason_show" mode="center" closeable border-radius="8">
			<view class="reason-show">
				需要补充工作内容详情.
			</view>
		</u-popup>
		<PayPopup title="费用" btnText="立即托管" :show="show" @close="closePay"></PayPopup>
	</view>
</template>

<script>
	import PayPopup from "@/components/PayPopup.vue"
	import WorksItem from "@/components/WorksItem.vue"
	export default{
		components:{
			PayPopup,
			WorksItem
		},
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				list: [
					{
					name: '介绍'
					}, {
						name: '子项目'
					}, {
						name: '进展'
					},
				],
				current: 0, //当前活动的tab选项
				swiperCurrent:0,
				reason_show:false,//原因弹窗
				checked:false,
				show:false,
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods:{
			//返回
			black(){
				uni.navigateBack()
			},
			// tabs切换
			tabsChange(index) {
				this.current = index;
				this.swiperCurrent = index
			},
			changeSwiper(e){
				this.current = e.detail.current;
				this.swiperCurrent = e.detail.current
			},
			toPage(url){
				console.log('[跳转]',url)
				uni.navigateTo({
				    url: url
				});
			},
			//关闭弹窗
			closePay(e){
				this.show = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		.header-nav{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			.left{
				display: flex;
				align-items: center;
				.title{
					font-size: 34rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34rpx;
					margin-left: 35rpx;
				}
			}
			
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
		.header{
			padding: 40rpx 30rpx 64rpx 30rpx;
			background: #4A90E2;
			display: flex;
			align-items: center;
			justify-content:space-between;
			.left{
				width: calc(100% - 200rpx);
				.title{
					display: flex;
					align-items: center;
					text{
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 32rpx;
						display: block;
						&:last-child{
							width: 32rpx;
							height: 32rpx;
							margin-left: 32rpx;
							background: url(../../static/image/ico/wenti_yiwen.png)center center no-repeat;
							background-size: 32rpx 32rpx;
						}
					}
				}
				.des{
					margin-top: 26rpx;
					text{
						display: block;
						font-size: 26rpx;
						font-weight: 400;
						color: #96C6FF;
						line-height: 37rpx;
					}
				}
				
			}
			.right{
				
				padding:7rpx 34rpx 14rpx 34rpx;
				background: #4388D9;
				border-radius: 8rpx;
				text-align: center;
				font-size: 0;
				.title,.status{
					font-size: 20rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 34rpx;
				}
				.status{
					margin-top: 10rpx;
				}
				image{
					width: 73rpx;
					height: 70rpx;
					margin-top: 10rpx;
				}
			}
		}
		.content{
			padding: 57rpx 30rpx 0 30rpx;
			position: relative;
			background-color: #FFFFFF;
			.tab-nav{
				width: calc(100% - 60rpx);
				box-sizing: border-box;
				position: absolute;
				left: 30rpx;
				top:-30rpx;
				background-color: #f9f9f9;
				border-radius: 8rpx;
				overflow: hidden;
			}
			uni-swiper{
				// height: calc(100vh - 80rpx - 440rpx - 114rpx);
				height: calc(100vh - var(--status-bar-height) - 334rpx - 40px);
				.scroll{
					// height: calc(100vh - 80rpx - 440rpx - 114rpx);
					height: calc(100vh - var(--status-bar-height) - 334rpx - 40px - 124rpx);
					.introduction{
						padding: 30rpx 0;
						border-bottom: 1px solid #E6E6E6;
					}
					.introduction-imgs{
						padding: 30rpx 0;
						image{
							width: 165rpx;
							height: 165rpx;
							border-radius: 8rpx;
							margin: 0 10rpx 10rpx 0;
							border: 1px solid #f9f9f9;
						}
					}
					.schedule{
						.date{
							text-align: center;
							font-size: 22rpx;
							font-weight: 400;
							color: #AEAEAE;
							line-height: 30rpx;
							margin: 30rpx 0 32rpx 0;
						}
						.cont{
							padding: 23rpx 20rpx;
							background: #F9F9F9;
							border-radius: 8rpx;
							font-size: 0;
							text{
								font-size: 26rpx;
								font-weight: 400;
								color: #4A90E2;
								line-height: 37rpx;
								&:last-child{
									color: #333333;
								}
							}
							
						}
					}
					.process{
						padding-top: 30rpx;
						.job-time{
							padding: 20rpx 20rpx 0rpx 20rpx;
							border-radius: 8rpx;
							background:#F9F9F9 url(../../static/image/ico/shijian.png)right bottom no-repeat;
							background-size: 115rpx 128rpx;
							.title{
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								line-height: 33rpx;
								padding-bottom: 20rpx;
								text-align: center;
								border-bottom: 1px solid #E6E6E6;
							}
							.cont{
								display: flex;
								align-items: center;
								justify-content: center;
								view{
									text-align: center;
									margin: 30rpx 0 27rpx 0;
									.des{
										font-size: 20rpx;
										color: #888888;
										line-height: 28rpx;
									}
									.time{
										font-size: 32rpx;
										font-weight: 500;
										color: #333333;
										line-height: 45rpx;
										margin: 20rpx 0 0 0;
									}
								}
								.starTime{
									margin-right: 85rpx;
								}
								.endTime{
									margin-left: 85rpx;
								}
							}
						}
					}
					.marker{
						margin-top: 30rpx;
						.marker_title{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.title{
								text{
									font-size: 28rpx;
									font-weight: 500;
									color: #333333;
									line-height: 34rpx;
									&:last-child{
										color: #888888;
									}
								}
							}
						}
						.u-checkbox{
							width: 100%;
							background: #F9F9F9;
							border-radius: 8rpx;
							padding: 22rpx 32rpx;
							margin-top: 30rpx;
							/deep/.u-checkbox__label{
								width: 100%;
								margin-left: 30rpx;
								.title{
									font-size: 28rpx;
									font-weight: 500;
									color: #333333;
									line-height: 32rpx;
								}
								.des{
									font-size: 22rpx;
									font-weight: 400;
									color: #888888;
									line-height: 30rpx;
								}
							}
							
						}
					}
				}
			}
			
		}
		.tabar{
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			height: 114rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 13rpx 0px rgba(168, 168, 168, 0.5);
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.status{
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				// line-height: 114rpx;
			}
			.add{
				display: flex;
				align-items: center;
				text{
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					line-height: 37rpx;
					margin-left: 10rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				.modify{
					width: 168rpx;
					height: 62rpx;
					background: #4A90E2;
					border-radius: 31rpx;
					line-height: 62rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #FFFFFF;
					&::after{
						border: 0;
					}
					margin-left: 30rpx;
				}
				.reason{
					font-size: 26rpx;
					color: #4A90E2;
					line-height: 37rpx;
				}
			}
		}
		.reason-show{
			width: calc(100vw - 120rpx);
			padding: 60rpx 40rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			line-height: 37rpx;
		}
	}
</style>
